<template>
	<view class="" v-show="show">
		<view class="custom-image-view" @touchstart="touchstart" @touchend="touchend">
			<movable-area class="movable-area">
				<movable-view class="movable-view" direction="all" out-of-bounds scale inertia scale-min="1"
					scale-max="3">
					<image :src="_imageData.imageUrl" mode="aspectFit"></image>
				</movable-view>
			</movable-area>
		</view>
		<view class="btns">
			<view class="custom" @click.stop="$u.debounce(downloadImage)">
				<image src="@/static/images/icon/download.png" mode="aspectFit"></image>
			</view>
			<view class="custom" @click.stop="$u.debounce(retry)">
				不满意? 点击重新生成
			</view>
		</view>

	</view>

</template>

<script>
	import {
		generateCustomImage
	} from '@/api/custom.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		getCreditList
	} from '@/api/my.js'
	import {
		uploadTextImage
	} from '@/utils/utils.js'
	export default {
		name: "custom-image-view",
		props: {
			imageData: {
				type: Object,
				default: () => {}
			},
		},
		watch: {
			imageData(newValue, oldValue) {
				this._imageData = newValue
			}
		},
		computed: {
			...mapGetters(['totalCredits'])
		},
		data() {
			return {
				_imageData: this.imageData,
				show: false
			};
		},
		methods: {
			...mapMutations(['setTotalCredits']),
			// 重新定制
			retry() {
				console.log(this.imageData);
				const _this = this
				uni.showModal({
					content: `重新生成两张需要消耗2点算力(剩余${this.totalCredits}算力)，\n确定重新生成？`,
					success: function(res) {
						if (res.confirm) {
							if (_this.imageData.subType == 11) {
								const postDate = {
									userImageId: _this.imageData.userImageId,
									hasPhoneCase: false,
									materialMap: _this.imageData.materialMap,
									stickerImageId: _this.imageData.stickerImageId
								}
								generateCustomImage(postDate).then(res => {
									uni.showToast({
										title: '已提交制作\n稍后可到我的定制页查看',
										icon: 'none'
									});
									getCreditList({
										pageSize: 1
									}).then(res => {
										_this.setTotalCredits(res.data.totalCredits)
									})
								})
							}

							if (_this.imageData.subType == 12) {
								uni.getImageInfo({
									src: _this.imageData.imageUrl,
									success: (res) => {
										const materialMap = JSON.stringify(_this.imageData.materialMap)
										console.log(materialMap);
										uploadTextImage(res.path, {
											userImageId: _this.imageData.userImageId,
											hasPhoneCase: 'false',
											materialMap: materialMap,
											stickerImageId: _this.imageData.stickerImageId,
											content: _this.imageData.content,
											fontImageId: _this.imageData.fontImageId,
											flag: 'none'
										}, (res) => {
											const data = JSON.parse(res.data)
											if (data.code == 2001) {
												uni.showToast({
													title: "当前算力不足，请充值",
													icon: 'none',
													duration: 2000
												})
												return
											}
											uni.showToast({
												title: '已提交制作\n稍后可到我的定制页查看',
												icon: 'none'
											});
											getCreditList({
												pageSize: 1
											}).then(res => {
												_this.setTotalCredits(res.data
													.totalCredits)
											})
										})
									}
								})

							}



						}
					}
				});

			},
			// 下载图片
			downloadImage() {
				const _this = this
				uni.getImageInfo({
					src: this._imageData.imageUrl,
					success: (res) => {
						console.log(res);
						wx.saveImageToPhotosAlbum({
							filePath: res.path,
							success() {
								wx.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
							},
							fail(err) {
								// wx.showToast({
								// 	title: '保存失败，请重试',
								// 	icon: 'none',
								// 	duration: 2000
								// });
								// console.error(err);
							}
						});
					},
					fail: (err) => {
						console.error('导出图片失败', err);
					}
				}, this);
			},
			touchstart(e) {
				this.time = new Date() / 1
			},
			touchend(e) {
				const newTime = new Date() / 1
				if (newTime - this.time < 100) {
					this.ontoggle()
				}
			},
			ontoggle() {
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss">
	.custom-image-view {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #000;

		.movable-area {
			height: 750rpx;
			width: 750rpx;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);

			.movable-view {
				height: 750rpx;
				width: 750rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}
		}
	}

	.btns {
		position: absolute;
		bottom: 160rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;

		.custom {
			height: 78.8rpx;
			border-radius: 78rpx;
			font-size: 35rpx;
			box-sizing: border-box;
			text-align: center;
			line-height: 78.8rpx;
			background-color: #fff;
			color: #333;
			padding: 0 35rpx;
			white-space: nowrap;
			margin: 0 17rpx;

			image {
				height: 45rpx;
				width: 45rpx;
				margin-top: 15rpx;
			}
		}
	}
</style>